﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../assets/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="page-wraper">
        <div class="returnback" id="returnTop">
            <a href="javascript:void(0);">
                <i class="fa fa-arrow-up"></i>
            </a>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title">内页整体布局</h3>
            </div>
            <div class="panel-body">
                <pre><code data-language="html">//内页整体布局
<div class="page-wraper"> page-wrapper类有20px的内边距.page-wraper{ padding:20px}
    
    <div class="page-title">
        ...这里是页面标题，就是当前是什么页面
    </div>

    <div class="page-bar">
        ...这里是页面的导航，当前页面的位置，如何，在该栏的右边还可以放一些操作按钮
    </div>

    <div class="page-filter">
        ...这里就是页面的过滤了，根据过滤选项的多少，又分为单行过滤和多行过滤（高级过滤）
    </div>

    <div class="page-form">
        ...如果页面的主要内容是表单就要使用<div class="page-form"></div>，在里面放表单
        表单可以是单列的简单表单，也可以是多列分布的复杂表单，同时查看表单的页面也需要
        放到这个标签里面
    </div>

    <div class="page-table">
        ...如果页面的主要内容是表格就使用<div class="page-table"></div>，这里的表格其实
        也可以把这里理解为列表，我们用的最多的也就是这个。表格可以分为简单表格，带选择框
        的表格和带操作按钮的表格
    </div>

    <div class="pagnation">
        ...如果是表格，就少不了分页
    </div>

    <div class="page-footer">
        ...页面的底部，包含一些信息，有时候还可以放一些动态消息，一个有用的返回顶部按钮
    </div>

</div>
</code></pre>
            </div>
        </div>
    </div>

    <!--JS代码-->
    <script src="../../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../../assets/js/plugins/jquery.mui.js"></script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
</body>
</html>
